<template>
  <a-layout style="height:100%">
    <a-layout-header class="bg-white admin-content-header">
      <el-button type="primary" plain @click="setdrawer = !setdrawer">发送通知</el-button>
      <sendmessage
        v-bind="{setdrawer,users, gettemplates, messagesend, getfans:user_info_list, setselectUser}"
      ></sendmessage>
    </a-layout-header>
    <a-layout-content class="admin-content-table">
      <el-tabs v-model="activeName">
        <el-tab-pane
          :label="vo.name"
          v-for="(vo, io) in gettags"
          :key="`${io}videos11`"
          :name="`${vo.id}`"
        ></el-tab-pane>
      </el-tabs>
      <el-table
        :data="tableData.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        style="width: 100%"
        id="user"
      >
        <el-table-column width="55" prop="openid">
          <template slot="header">
            <input type="checkbox" class="form-check-input" name="openids" v-model="selects" />
          </template>
          <template slot-scope="scope">
            <input
              type="checkbox"
              class="form-check-input"
              name="openid"
              :value="scope.row.openid"
              v-model="selectUser"
            />
          </template>
        </el-table-column>
        <el-table-column label="头像" width="60px" prop="headimgurl">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.headimgurl"
              lazy
              style="width: 48px; height: 48px"
              :preview-src-list="previewSrcList"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="微信昵称" prop="nickname"></el-table-column>
        <el-table-column label="性别" width="50px" prop="sex">
          <template slot-scope="scope">{{scope.row.sex?'男':'女'}}</template>
        </el-table-column>
        <el-table-column label="城市" width="150px" prop="city"></el-table-column>
        <el-table-column label="国家" width="150px" prop="country"></el-table-column>
        <el-table-column label="省份" width="150px" prop="province"></el-table-column>
        <el-table-column label="关注时间" prop="subscribe_time">
          <template
            slot-scope="scope"
          >{{(new Date(scope.row.subscribe_time*1000)).toISOString().slice(0,10)}}</template>
        </el-table-column>
        <el-table-column label="备注" prop="remark"></el-table-column>
        <el-table-column label="标签列表" prop="tagid_list">
          <template slot-scope="scope">
            <el-tag
              v-for="(v,i) in scope.row.tagid_list"
              :key="`${i}weixin-user3`"
            >{{ gettags.find(vo=> vo.id === v).name }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column align="right" width="200px">
          <template slot="header">
            <input class="form-control" v-model.lazy="search" placeholder="输入关键字搜索" />
          </template>
          <template slot-scope="scope">
            <el-popover placement="left" width="260">
              <el-input size="mini" v-model="remark" :value="scope.row.remark" placeholder="请输入内容">
                <template slot="append">
                  <el-button type="primary" size="mini" @click="handleEdit(scope.row.openid)">确定</el-button>
                </template>
              </el-input>
              <el-button size="mini" slot="reference">修改备注</el-button>
            </el-popover>
            <el-popover placement="top-start" width="260">
              <el-select
                v-model="tagid_list"
                multiple
                collapse-tags
                style="margin-left: 20px;width:150px"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in gettags"
                  :key="`${item.id}weixin-user1`"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
              <el-button type="primary" size="mini" @click="useraddtags(scope.row)">确定</el-button>
              <el-button
                size="mini"
                @click="(tagid_list = scope.row.tagid_list)"
                slot="reference"
              >打标签</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </a-layout-content>
    <adminContentFooter
      v-bind="{handleSizeChange, handleCurrentChange, currentPage, pagesize,data: tableData}"
    ></adminContentFooter>
  </a-layout>
</template>

<script>
import sendmessage from "./sendmessage.vue";
import { without, difference } from "underscore";
import { asyncgettaguser, asyncbatchget } from "../../plugins/api.js";
import adminContentFooter from "@/components/admin/admin-content-footer.vue";
export default {
  name: "weixin-user",
  data() {
    return {
      currentPage: 1,
      pagesize: 20,
      search: "",
      selects: false,
      setdrawer: false,
      remark: "",
      dialogVisible: false,
      tagid_list: [],
      loading: false,
      activeName: 0,
      fans: [],
      user_info_list: [],
      selectUser: []
    };
  },
  props: [
    "getfans",
    "gettags",
    "gettemplates",
    "messagesend",
    "updateremark",
    "batchuntagging",
    "batchtagging"
  ],
  watch: {
    async activeName(v) {
      if (v !== "0") {
        try {
          const { data = { openid: [] } } = await asyncgettaguser({ tagid: v });
          this.fans = data.openid;
        } catch (e) {
          this.fans = [];
        }
        if (this.fans.length) {
          await this.batchget(this.fans);
        } else {
          this.user_info_list = [];
        }
      }
    },
    selects(v) {
      if (v) {
        this.selectUser = this.tableData.map(v => v.openid);
      } else {
        this.selectUser = [];
      }
    }
  },
  computed: {
    tableData() {
      const { user_info_list, search } = this;
      return user_info_list.filter(data =>
        Object.values(data)
          .join("")
          .toLowerCase()
          .includes(search.toLowerCase())
      );
    },
    users() {
      const { selectUser, user_info_list } = this;
      return user_info_list.filter(v => selectUser.includes(v.openid));
    },
    previewSrcList() {
      return this.tableData.map(({ headimgurl }) => headimgurl);
    }
  },
  methods: {
    async batchget(brr) {
      this.$notify({
        title: "提示",
        message: "开始查询共有" + brr.length + "条"
      });
      this.user_info_list = [];
      if (brr.length > 100) {
        this.$notify({
          title: "提示",
          message: "数量较多每次查询90条"
        });
        for (let v = 0; v < brr.length; v += 90) {
          const { user_info_list } = await asyncbatchget({
            openid_list: brr.slice(v, v + 90)
          });
          this.user_info_list.push(...user_info_list);
        }
      } else {
        const { user_info_list } = await asyncbatchget({
          openid_list: brr
        });
        this.user_info_list = user_info_list;
      }
      this.$notify({
        title: "提示",
        message: "查询完成"
      });
    },
    async handleEdit(openid) {
      await this.updateremark({ openid, remark: this.remark });
      this.$store.dispatch("weixin/actionfans", openid);
    },
    handleCurrentChange(index) {
      this.currentPage = index;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    setselectUser(v) {
      this.selectUser = without(this.selectUser, v);
    },
    openmess() {
      if (this.selectUser.length === 0) {
        this.$alert("请选择用户");
      } else {
        this.drawer = true;
      }
    },
    opentag() {
      if (this.selectUser.length === 0) {
        this.$alert("请选择用户");
      } else {
        this.dialogVisible = true;
      }
    },
    async useraddtags(data) {
      const arr = data.tagid_list;
      const brr = this.tagid_list;
      const de = difference(arr, brr);
      const up = difference(brr, arr);
      for (let v of de) {
        await this.batchuntagging({
          openid_list: [data.openid],
          tagid: v
        });
      }
      for (let v of up) {
        await this.batchtagging({
          openid_list: [data.openid],
          tagid: v
        });
      }
      this.$store.dispatch("weixin/actionfans");
    },
    setchecked(data) {
      this.tagid_list = data;
    },
    handleClick() {}
  },
  components: {
    sendmessage,
    adminContentFooter
  }
};
</script>

<style>
#user th .cell {
  height: 40px;
}
</style>